<template>
  <div class="sidebar" style="display: flex;">
    <div class="left_tabs" v-if="role < 2000" style="height: 1000px; background-color: #344058;">
      <div v-for="(item,i) in table_clazz_student" :class="item.clazz" @click="mveltabsactivebar(i)"><i
        :class="item.icon"/><span>{{item.title}}</span></div>
    </div>


    <div class="left_tabs" v-if="role >=2000 && role < 9000" style="height: 1000px; background-color: #344058;">
      <div v-for="(item,i) in table_clazz_teacher" :class="item.clazz" @click="mveltabsactivebar(i)"><i
        :class="item.icon"/><span>{{item.title}}</span></div>
    </div>
    <div class="left_tabs" v-if="role>= 9000" style="height: 1000px; background-color: #344058;">
      <div v-for="(item,i) in table_clazz_admin" :class="item.clazz" @click="mveltabsactivebar(i)"><i
        :class="item.icon"/><span>{{item.title}}</span></div>
    </div>

  </div>


</template>

<script>
    /*
   * 申明三个模板( html 片段 )
   */


    export default {
        name: "Sidebar",

        data() {
            return {

                role: 1000,
                // role: 'admin',
                // role: 'student',
                index: '1',
                table_clazz_student: [
                    {icon:"el-icon-medal mr-5",clazz: "table", title: "我的成果", path: "Achievements"},
                    {icon:"el-icon-notebook-2 mr-5",clazz: "table", title: "毕业设计", path: "thesis"},
                    {icon:"el-icon-user mr-5",clazz: "table", title: "个人信息", path: "Personal_information"},
                    {icon:"el-icon-s-data mr-5",clazz: "table", title: "统计", path: "Statistics"}],
                table_clazz_teacher: [
                    {icon:"el-icon-medal mr-5",clazz: "table", title: "成果管理", path: "TAchievements"},
                    {icon:"el-icon-notebook-2 mr-5",clazz: "table", title: "选题管理", path: "addTopic"},
                    {icon:"el-icon-user mr-5",clazz: "table", title: "个人信息", path: "TPersonal_information"},
                    {icon:"el-icon-s-data mr-5",clazz: "table", title: "统计", path: "TStatistics"}
                    ]
                ,
                table_clazz_admin: [
                    {icon:"el-icon-medal mr-5",clazz: "table", title: "成果管理", path: "TAchievements"},
                    {icon:"el-icon-notebook-2 mr-5",clazz: "table", title: "选题管理", path: "addTopic"},
                    {icon:"el-icon-user mr-5",clazz: "table", title: "个人信息", path: "TPersonal_information"},
                    {icon:"el-icon-setting mr-5",clazz: "table", title: "管理员", path: "addUser"},
                    {icon:"el-icon-s-data mr-5",clazz: "table", title: "统计", path: "TStatistics"}
                ],
            }
        },
        methods: {

            mveltabsactivebar (index) {
              this.$cookie.set('indexs', index);
              if(console.log(index))
                if (index == this.index)
                    return;
                this.index = index;
                var self = this;
                var tablist;
                console.log(self.role)
                if (self.role >= 2000 && self.role < 9000) {
                    tablist = self.table_clazz_teacher;
                } else if (self.role < 2000) {
                    tablist = self.table_clazz_student;
                } else if (self.role >= 9000) {
                    tablist = self.table_clazz_admin;
                }
                console.log(tablist)
                for (var i = 0; i < tablist.length; i++) {
                    sessionStorage.removeItem("activeName")
                    if (i == index) {
                        tablist[i].clazz = 'table_click'
                    } else {
                        tablist[i].clazz = 'table '
                    }
                }

                self.$router.push({
                    name: tablist[index].path
                });

            },

            switchts() {

                var self = this;
                if (this.role < 2000) {
                    this.role = 2000
                } else {
                    this.role = 1222
                }

            }
        },
        created: function () {

            //  登录之后，加载角色

            var role = JSON.parse(localStorage.getItem("userrole"));
            var roles = [];
            for (var i = 0; i < role.length; i++) {

                this.role = role[i].grades
                roles.push(role[i].grades)
            }
            this.$cookie.set("role", roles)
          var indexs = this.$cookie.get("indexs");
          console.log()
        //  将第一个设为默认
         this.mveltabsactivebar(indexs!=null?indexs:0);

        }


    }
</script>

<style scoped>


</style>
